<!DOCTYPE html>
<html>
<head>
	<title>周考微博</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="weibo.css">
</head>
<body>
	<div class="out">
		<div class="head">
			<p>来，说说你在做什么，想什么</p>
			<div class="content">
				<input type="text" name="" id="txt1">
				<div id="tp">
					<img class="photo" onclick="changeShowImage(0)" src="img1/1.jpg">
					<img onclick="changeShowImage(1)" src="img1/2.jpg">
					<img onclick="changeShowImage(2)" src="img1/3.jpg">
					<img onclick="changeShowImage(3)" src="img1/4.jpg">
					<img onclick="changeShowImage(4)" src="img1/5.jpg">
					<img onclick="changeShowImage(5)" src="img1/6.jpg">
					<img onclick="changeShowImage(6)" src="img1/7.jpg">
					<img onclick="changeShowImage(7)" src="img1/8.jpg">
				</div>
			</div>
			<textarea id="txt2"></textarea>
			<div class="in">
				<p>还能输入150个字</p>
				<input type="button" name="" id="but1" value="广播" onclick="guangbo()">
			</div>
		</div>
		<div class="show">
			<div class="show1">
				<span id="s1">大家在说</span>
			</div>
			<div class="speak">
				<ul id="ulItem">
					<!-- <li>
						<div class="div1">
							<img src="img1/1.jpg">
						</div>
						<span class="name2">愚人节</span>
						<span class="content2">愚人节是四月一号</span>
						<time class="date">2019.04.01</time>
						<input type="button" name="" value="删除" id="but2">
					</li> -->
				</ul>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		var ul = document.getElementById('ulItem');
		var img = document.querySelectorAll("img");
		var a;
		var b;
		function changeShowImage(index){
			for (var i = 0; i < img.length; i++) {
				img[i].className = "";
			} 
			 a = img[index].src;
			 b = img[index].className = "photo";
		}

		var txt2 = document.getElementById('txt2');
		txt2.onkeyup = function(){
			var len = '150' - txt2.value.length;
			document.getElementsByTagName('p')[1].innerText =  "还能输入" + (150 - txt2.value.length) + "个字";
			if(txt2.value.length >= 150){
				document.getElementsByTagName('p')[1].innerText = "已经超过了" + (txt2.value.length - 150) + "个字";
			}
		}

		function guangbo(){
			var name = document.getElementById('txt1').value.trim();
			var t2 = document.getElementById('txt2').value;

			var name2 = document.createElement("span");
			var date = document.createElement('span');
			var content2 = document.createElement("span");

			var mz = document.createElement("span");
			var nr = document.createElement("span");
			var li = document.createElement("li");
			if(name == "" || name.length>8){
				alert("请输入八个字符以内的昵称");
				return;
			}else if(t2 =="" || t2.length > 150){
				alert("请输入有效内容");
				return;
			}else if(b != "photo"){
				alert("请选择头像！");
				return;
			}

			ul.appendChild(li);
			var div1 = document.createElement("div1");
			div1.className = "div1";
			li.appendChild(div1);

			var imgs = document.createElement('img');
			imgs.src = a;
			div1.appendChild(imgs);
		
			mz.className = "name2";
			mz.innerText = txt1.value;
			name2.appendChild(mz);
			li.appendChild(name2);

			nr.className = "content2"
			nr.innerText = txt2.value;
			li.appendChild(nr);

			var time = document.createElement('time');
			var date = new Date().toLocaleString();
			time.className = "date";
			time.innerText = date;
			li.appendChild(time);

			var del = document.createElement("input");
			del.className = "del";
			del.type = "button";
			del.value = "删除";
			li.appendChild(del);
			del.onclick = function(){
				this.parentNode.parentNode.removeChild(li);
			}
		}

		

		



	</script>
</body>
</html>